<template>
  <div class="hom1-container">
    <div class="left">
      <ul class="card-ul-1 gap-10 flex">
        <li class="card-box flex1">
          <p class="text-title-label">老年人能力等级</p>
          <div class="icon-list">
            <div
              class="icon-list-item"
              v-for="(item, index) in levelList"
              :key="index"
            >
              <img :src="item.icon" class="icon-img" alt="" />
              <p>{{ item.label }}</p>
              <p :style="{ color: item.color }">{{ item.value || 0 }}%</p>
            </div>
          </div>
        </li>
        <li class="card-box flex1">
          <p class="text-title-label">老年人居住情况（万人）</p>
          <AplidCharts
            ref="chartEl1"
            :option="barChart()"
            style="width: 100%; height: 100%"
          ></AplidCharts>
        </li>
      </ul>

      <ul class="card-ul-2 gap-10">
        <li class="card-box flex1">
          <p class="text-title-label">各区老年人户籍人口（万人）</p>
        </li>
        <AplidCharts
          ref="chartEl1"
          :option="barChartTwo()"
          style="width: 100%; height: 85%"
        ></AplidCharts>
      </ul>

      <ul class="card-ul-3 gap-10 flex">
        <li class="card-box flex1">
          <p class="text-title-label">老年人口变化趋势（万人）</p>
          <AplidCharts
            ref="chartEl1"
            :option="lineChartOne()"
            style="width: 100%; height: 85%"
          ></AplidCharts>
        </li>
        <li class="card-box flex1">
          <p class="text-title-label">政府购买扶助对象</p>
          <AplidCharts
            ref="chartRadarEl"
            :option="radarChart()"
            style="width: 100%; height: 85%"
          ></AplidCharts>
        </li>
      </ul>
    </div>
    <div class="main">
      <TabCheck
        :tabs="tabsCenter"
        v-model="activeTab"
        @update:modelValue="handleTabChange"
        class="tab-box"
      ></TabCheck>
      <MapMain :key="activeTab" :activeTab="activeTab"></MapMain>
    </div>
    <div class="right">
      <ul class="card-ul-1 gap-10 flex">
        <li class="card-box flex1">
          <p class="text-title-label">设施数据统计（家）</p>
          <div class="icon-right-list">
            <img
              :src="getAssetsFile('icon-hom1/icon-4.webp')"
              class="icon-img"
              alt=""
              style="width: 60px"
            />
            <p style="font-size: 64px; font-weight: bold; text-align: center">
              1467
            </p>
<!--             
            <div
              class="icon-right-list-item"
              v-for="(item, index) in orgSList"
              :key="index"
            >
              <img :src="item.icon" class="icon-img" alt="" />
              <div class="text-left">
                <p>{{ item.label }}</p>
                <p
                  :style="{ color: item.color, marginTop: '10px' }"
                  class="value"
                >
                  {{ item.value || 0 }}
                </p>
              </div>
            </div> -->
          </div>
        </li>
        <li class="card-box flex1">
          <p class="text-title-label">设施场所性质</p>
          <div class="org-rate-chart">
            <AplidCharts
              ref="chartOrgEl2"
              :option="pieChartOrg3(2)"
              style="width: 100%; height: 100%; position: absolute"
            ></AplidCharts>
            <div class="text-content">
              <p class="text-value">{{ globalQuery["home1"]?.value || 4 }}%</p>
              <p class="text-label">
                {{ globalQuery["home1"]?.name || "国有产权" }}
              </p>
            </div>
          </div>
        </li>
      </ul>

      <ul class="card-ul-2 gap-10">
        <li class="card-box flex1">
          <p class="text-title-label">各区设施数量、日间照料床位数量</p>
          <AplidCharts
            ref="chartEl1"
            :option="barChart12(org12_DATA, 2)"
            style="width: 100%; height: 200px"
          ></AplidCharts>
        </li>
      </ul>

      <ul class="card-ul-3 gap-10 flex">
        <li class="card-box flex1">
          <p class="text-title-label">设施等级</p>
          <AplidCharts
            ref="chartPie3dEl"
            type="Pie3d"
            :option="Pie3d(levelLenend)"
            style="width: 100%; height: 80%; position: absolute; top: 0"
          ></AplidCharts>
          <LegendBox :data="levelLenend" unit='%'></LegendBox>
        </li>
        <li class="card-box flex1">
          <p class="text-title-label">设施服务项目</p>
          <AplidCharts
            ref="chartGraphEl"
            :timeLoad="false"
            :option="graphChart()"
            style="width: 100%; height: 100%"
          ></AplidCharts>
        </li>
      </ul>
    </div>
  </div>
</template>

<script setup lang="ts">
import TabCheck from "./components/TabCheck/index.vue";
import MapMain from "@/views/aplid/MapMain/index.vue";
import { getAssetsFile } from "@/utils/index";
import {
  barChart,
  barChartTwo,
  lineChartOne,
  barChart12,
  RateChart,
  Pie3d,
  pieChartOrg2,
  pieChartOrg3,
  radarChart,
  graphChart,
} from "./config";
import { useCommonStore } from "@/stores/common";
const { setGlobalData } = useCommonStore();

const { globalQuery } = storeToRefs(useCommonStore());

const router = useRouter();

const chartPie3dEl = ref(null);
const activeTab = ref("2");
const org12_DATA = [
  { label: "玄武区", value: 73, value2: 329 },
  { label: "秦淮区", value: 115, value2: 1594 },
  { label: "建邺区", value: 68, value2: 58 },
  { label: "鼓楼区", value: 185, value2: 87 },
  { label: "栖霞区", value: 181, value2: 1612 },
  { label: "雨花台区", value: 79, value2: 105 },
  { label: "江宁区", value: 230, value2: 4230 },
  { label: "浦口区", value: 66, value2: 668 },
  { label: "六合区", value: 107, value2: 15 },
  { label: "溧水区", value: 150, value2: 30 },
  { label: "高淳区", value: 130, value2: 196 },
  { label: "江北新区", value: 82, value2: 60 },
];
const tabsCenter = [
  { label: "养老机构", value: "1" },
  { label: "社区居家养老服务设施", value: "2" },
];
const levelLenend = [
 {
      name: "一级",
      value: 5,
      itemStyle: {
        color: "#69D5E9",
      },
    },
    {
      name: "二级",
      value: 15,
      itemStyle: {
        color: "#1877E6",
      },
    },
    {
      name: "三级",
      value: 52,
      itemStyle: {
        color: "#FDBD00",
      },
    },
    {
      name: "四级",
      value: 6,
      itemStyle: {
        color: "#9138EF",
      },
    },
    {
      name: "五级",
      value: 4,
      itemStyle: {
        color: "#77C484",
      },
    },
    {
      name: "未评级",
      value: 18,
      itemStyle: {
        color: "#E8BA65",
      },
    },
];
const levelList = [
  {
    label: "失能",
    value: "12",
    icon: getAssetsFile("icon-hom1/icon-1.webp"),
    color: "rgba(219, 0, 253, 1)",
  },
  {
    label: "半失能",
    value: "18",
    icon: getAssetsFile("icon-hom1/icon-2.webp"),
    color: "rgba(253, 189, 0, 1)",
  },
  {
    label: "自理",
    value: "70",
    icon: getAssetsFile("icon-hom1/icon-3.webp"),
    color: "rgba(5, 247, 173, 1)",
  },
];

const orgSList = [
  {
    label: "设施总数",
    value: "1467",
    icon: getAssetsFile("icon-hom1/icon-4.webp"),
    color: "rgba(22, 200, 255, 1)",
  },
  {
    label: "床位总数",
    value: "5199",
    icon: getAssetsFile("icon-hom1/icon-5.webp"),
    color: "rgba(22, 200, 255, 1)",
  },
  {
    label: "入住总数",
    value: "439",
    icon: getAssetsFile("icon-hom1/icon-6.webp"),
    color: "rgba(22, 200, 255, 1)",
  },
  {
    label: "入住率",
    value: "8%",
    icon: getAssetsFile("icon-hom1/icon-7.webp"),
    color: "rgba(253, 189, 0, 1)",
  },
];

const bedList = [
  {
    label: "日间照料床位",
    value: 1452,
    icon: getAssetsFile("icon-hom1/icon-8.webp"),
    afterColor: "#272452ff",
    beforeColor: "#9c4ef7ff",
    progress: "60%",
  },
  {
    label: "全托床位",
    value: 4582,
    icon: getAssetsFile("icon-hom1/icon-9.webp"),
    afterColor: "#0c3c55ff",
    beforeColor: "#0dcefcff",
    progress: "70%",
  },
  {
    label: "公益性兜底床位",
    value: 741,
    icon: getAssetsFile("icon-hom1/icon-10.webp"),
    afterColor: "#392420ff",
    beforeColor: "#f78614ff",
    progress: "80%",
  },
];

const handleTabChange = (e) => {
  router.push(e == "1" ? "/Home1" : "/Home1Facilities");
};

onMounted(()=> {
  setGlobalData({},'home1');
})
onUnmounted(() => {
  setGlobalData({},'home1');
});
</script>

<style scoped lang="scss">
@import "./main.scss";
</style>
